import * as React from 'react';
import styled from 'styled-components';
import { Spring } from 'react-spring/renderprops';

const Path = styled.path`
  display: flex;
  justify-content: center;
  stroke: black;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.2px;
`;

const SeeqlWrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;
const Svg = styled.svg`
  display: flex;

  justify-content: center;
  align-items: center;
`;

const LoadComponent = () => {
  return (
    <SeeqlWrapper>
      <Spring from={{ x: 100 }} to={{ x: 0 }} config={{ duration: 18000 }}>
        {props => (
          <Svg strokeDasharray={props.x} width="225.704" height="83.608">
            <Path
              d="M 89.402 40.704 Q 89.502 40.654 89.627 40.904 Q 89.752 41.154 89.602 41.204 Q 87.202 41.804 85.452 41.804 Q 82.602 41.804 78.952 39.129 Q 75.302 36.454 72.302 31.754 Q 69.852 32.404 67.502 32.404 Q 63.102 32.404 59.727 30.379 Q 56.352 28.354 54.502 24.854 Q 52.652 21.354 52.652 17.054 Q 52.652 12.304 54.927 8.404 Q 57.202 4.504 61.102 2.254 Q 65.002 0.004 69.752 0.004 Q 74.202 0.004 77.527 1.979 Q 80.852 3.954 82.652 7.429 Q 84.452 10.904 84.452 15.254 Q 84.452 20.554 81.877 24.629 Q 79.302 28.704 75.002 30.754 Q 76.752 33.654 79.002 35.954 Q 81.252 38.254 83.502 39.554 Q 85.752 40.854 87.552 40.854 Q 88.652 40.854 89.402 40.704 Z M 92.952 27.754 L 92.952 4.604 Q 92.902 3.104 92.602 2.404 Q 92.302 1.704 91.477 1.429 Q 90.652 1.154 88.852 1.154 Q 88.752 1.154 88.727 0.854 Q 88.702 0.554 88.852 0.554 L 91.052 0.604 Q 92.952 0.704 94.202 0.704 Q 95.452 0.704 97.452 0.604 L 99.752 0.554 Q 99.852 0.554 99.852 0.854 Q 99.852 1.154 99.752 1.154 Q 97.902 1.154 97.052 1.429 Q 96.202 1.704 95.902 2.429 Q 95.602 3.154 95.552 4.654 L 95.552 27.554 Q 95.602 29.054 95.877 29.729 Q 96.152 30.404 96.977 30.654 Q 97.802 30.904 99.602 30.904 L 106.152 30.904 Q 109.002 30.904 110.377 29.229 Q 111.752 27.554 112.202 24.454 Q 112.202 24.304 112.452 24.304 Q 112.602 24.304 112.727 24.354 Q 112.852 24.404 112.852 24.504 Q 112.502 27.554 112.502 31.054 Q 112.502 31.454 112.302 31.629 Q 112.102 31.804 111.652 31.804 L 88.802 31.804 Q 88.702 31.804 88.677 31.504 Q 88.652 31.204 88.802 31.204 Q 90.602 31.204 91.452 30.954 Q 92.302 30.704 92.627 29.979 Q 92.952 29.254 92.952 27.754 Z M 55.102 15.104 Q 55.102 19.654 57.027 23.304 Q 58.952 26.954 62.302 29.029 Q 65.652 31.104 69.752 31.104 Q 73.452 31.104 76.202 29.379 Q 78.952 27.654 80.452 24.554 Q 81.952 21.454 81.952 17.404 Q 81.952 12.804 80.102 9.104 Q 78.252 5.404 75.002 3.304 Q 71.752 1.204 67.702 1.204 Q 64.052 1.204 61.177 2.904 Q 58.302 4.604 56.702 7.754 Q 55.102 10.904 55.102 15.104 Z M 5.402 32.354 Q 3.302 32.354 1.652 31.454 Q 0.002 30.554 0.002 29.254 Q 0.002 28.704 0.377 28.429 Q 0.752 28.154 1.252 28.154 Q 1.702 28.154 2.027 28.429 Q 2.352 28.704 2.852 29.354 Q 3.702 30.354 4.452 30.879 Q 5.202 31.404 6.602 31.404 Q 8.202 31.404 9.052 30.579 Q 9.902 29.754 9.902 28.304 Q 9.902 26.454 8.727 25.204 Q 7.552 23.954 5.252 22.454 Q 3.002 20.954 1.852 19.754 Q 0.702 18.554 0.702 16.754 Q 0.702 14.504 2.602 13.254 Q 4.502 12.004 6.852 12.004 Q 8.652 12.004 10.077 12.729 Q 11.502 13.454 11.502 14.454 Q 11.502 14.954 11.152 15.254 Q 10.802 15.554 10.252 15.554 Q 9.752 15.554 9.327 15.304 Q 8.902 15.054 8.352 14.554 Q 7.602 13.854 6.877 13.454 Q 6.152 13.054 5.052 13.054 Q 2.502 13.054 2.502 15.204 A 3.722 3.722 0 0 0 3.602 17.854 Q 4.702 19.004 6.902 20.504 Q 9.352 22.254 10.577 23.554 Q 11.802 24.854 11.802 26.704 Q 11.802 28.154 11.002 29.454 Q 10.202 30.754 8.752 31.554 Q 7.302 32.354 5.402 32.354 Z M 31.102 29.154 L 31.202 29.154 Q 31.352 29.154 31.527 29.304 A 0.262 0.262 0 0 1 31.638 29.495 A 0.196 0.196 0 0 1 31.602 29.604 Q 28.252 32.404 24.402 32.404 Q 21.602 32.404 19.627 31.079 Q 17.652 29.754 16.677 27.629 Q 15.702 25.504 15.702 23.054 Q 15.702 20.154 17.052 17.579 Q 18.402 15.004 20.752 13.429 Q 23.102 11.854 25.952 11.854 Q 27.902 11.854 28.952 12.554 Q 30.002 13.254 30.002 14.454 Q 30.002 16.654 26.627 18.479 Q 23.252 20.304 18.302 21.004 L 18.302 21.054 Q 18.302 25.504 20.302 28.154 Q 22.302 30.804 25.902 30.804 Q 29.002 30.804 31.102 29.154 Z M 49.152 29.154 L 49.252 29.154 Q 49.402 29.154 49.577 29.304 A 0.262 0.262 0 0 1 49.688 29.495 A 0.196 0.196 0 0 1 49.652 29.604 Q 46.302 32.404 42.452 32.404 Q 39.652 32.404 37.677 31.079 Q 35.702 29.754 34.727 27.629 Q 33.752 25.504 33.752 23.054 Q 33.752 20.154 35.102 17.579 Q 36.452 15.004 38.802 13.429 Q 41.152 11.854 44.002 11.854 Q 45.952 11.854 47.002 12.554 Q 48.052 13.254 48.052 14.454 Q 48.052 16.654 44.677 18.479 Q 41.302 20.304 36.352 21.004 L 36.352 21.054 Q 36.352 25.504 38.352 28.154 Q 40.352 30.804 43.952 30.804 Q 47.052 30.804 49.152 29.154 Z M 23.902 13.204 Q 21.152 13.204 19.802 15.154 Q 18.452 17.104 18.302 20.354 Q 26.952 19.054 26.952 15.204 Q 26.952 14.204 26.127 13.704 Q 25.302 13.204 23.902 13.204 Z M 41.952 13.204 Q 39.202 13.204 37.852 15.154 Q 36.502 17.104 36.352 20.354 Q 45.002 19.054 45.002 15.204 Q 45.002 14.204 44.177 13.704 Q 43.352 13.204 41.952 13.204 Z"
              vectorEffect="non-scaling-stroke"
            />
          </Svg>
        )}
      </Spring>
    </SeeqlWrapper>
  );
};

export default LoadComponent;
